Creating your first component in React
React components are the core building blocks of the React application. React components are created when you extend from the React’s component class. To create a component in the React, you must be familiar with import/export, and classes in the JavaScript ES6.
React application folder Structure
Once you have installed the create-react-app, you will have a directory structure as follows:
You will see node_modules, public, src directory, along with the .gitinore, package.json, package-lock.json, and readme.md inside that folder.
The SRC folder
Delete all files in SRC folder. Don’t worry, we will create files from scratch.
Create react component step by step
The index file
Create the index file. It will be the same as the previous lesson:
<!doctype HTML> <html lang="en"> <head> <title>First program in React</title> </head> <body> <div id="root"> </div> </body> </html>
The JS File
Now create index.js
In index.js you have to import React and ReactDOM,
import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { render() { return ( // JSX code here. ) } }
Inside the return, we put JSX code. We are not returning a string here, so no need of using single or double quotes around JSX code.
class App extends Component { render() { return ( <h1> Hello World! </h1> ) } }
In the end, we are going to use the ReactDOM render() method.
ReactDOM.render(<App />, document.getElementById('root'))
To check if you have the Node.js installed on your PC, go to command prompt and enter node –v
command. This should print the version of node.js. You need at least node version 5 or above to run React.
Now cd to your create-react-app location which is D:\reactcuorse from lesson #3.
On the command prompt, write
npm start
and hit enter.
If everything goes okay, the development server will go live and you will see Hello World in the web browser.
Great!
You have just created the first component in React.
Now, if I want to display a paragraph with <h1> tag, React will generate an error.
class App extends Component { render() { return ( <h1> Hello World! </h1><p> some text</p> ) } }
To correct this, you have to enclosed <h1> and <p> tag inside another <div> tag.
class App extends Component { render() { return ( <div> < h1 > Hello World! < /h1><p> some text</p> </div> ) }
Properties in Component
A component can also receive props. The concept is similar to how functions can receive the parameters. A property can also contain a function.
The properties of a component can be accessed through the object ‘props’.
Let’s say you want to modify the above example to print Hello John instead of Hello world.
class App extends Component { render() { return ( <div> <h1> Hello { this.props.name }! </h1> </div> ) } }
ReactDOM.render(<App name="John"/>, document.getElementById('root'))
A component is a separate entity and can be rendered within DOM or any other component.
This concludes our lesson on a very basic component. If you have a question about how components are created or receive props, please feel free to ask it in the comments section below.
React First Program | Tutorial Home | React Functional Components |
Comments